<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  
<div id="app">
<!-- <AkiApp>
    111
    <h1>插槽1</h1>
    222
</AkiApp>
<AkiApp>
    <h1>插槽1</h1>
    <h2>插槽2</h2>
</AkiApp> -->
<aki>

    杂物

    <template v-slot:header>
        <p>头部内容</p>
    </template>
    杂物
    <template #footer>
        <p>脚部内容</p>
    </template>
    杂物
</aki>

<aki>
<template v-slot:ren="res">
<p>她是{{res.na}}{{res.me}}--{{res.gender}}</p>
</template>
</aki>
</div>
  

<script>
const app = Vue.createApp({});
app.component('Aki', {
    data(){
        return{
            na: 'Akiyama',
            me:'Mio',
            gender:'女'
        }
    },
    template: `
    <div class="mio">
        <slot name="ren" v-bind="{na,me,gender}"></slot>
        <slot></slot>
        <slot name="footer"></slot>
    </div>
    `,
})
app.mount('#app');

</script>
</body>
</html>